<!--
 * @Description: 
 * @Author: Wen
 * @Date: 2024-11-14 09:25:03
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-14 09:44:36
 * 太棒了，又坚持了一天
-->
<template>
    <div class="container">
        <div class="form-container">
    <h2><font color="orange"><b>新用户注册</b></font><br><small><font color="grey"><b>USER REGISTER</b></font></small></h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="username" class="label">用户名</label>
          <input v-model="form.username" type="text" id="username" placeholder="请输入账号" class="input">
        </div>
        <div class="form-group">
          <label for="password" class="label">密码</label>
          <input v-model="form.password" type="password" id="password" placeholder="请输入密码" class="input">
        </div>
        <div class="form-group">
          <label for="email" class="label">Email</label>
          <input v-model="form.email" type="email" id="email" placeholder="请输入Email" class="input">
        </div>
        <div class="form-group">
          <label for="realname" class="label">姓名</label>
          <input v-model="form.realname" type="text" id="realname" placeholder="请输入真实姓名" class="input">
        </div>
        <div class="form-group">
          <label for="phone" class="label">手机号</label>
          <input v-model="form.phone" type="text" id="phone" placeholder="请输入您的手机号" class="input">
        </div>
        <div class="form-group">
          <label>性别
            <input v-model="form.gender" type="radio" name="gender" value="male" checked>男
            <input v-model="form.gender" type="radio" name="gender" value="female">女
          </label>
        </div>
        <div class="form-group">
          <label for="birthdate">出生日期</label>
          <input v-model="form.birthdate" type="date" id="birthdate" class="input">
        </div>
        <div class="form-group">
          <label for="captcha">验证码</label>
          <input v-model="form.captcha" type="text" id="captcha" class="input" style="width: 100px;">
          <!-- <img :src="captchaSrc" alt="Captcha Image" class="captcha-image"> -->
          <img src="./captcha-image/验证码1.jpg" alt="captcha-image" height=40px width=80px>
          <a href="#" @click.prevent="refreshCaptcha" style="color: blue;">换一张</a>
        </div>
        <button type="submit" class="submit-button" style="font-size: 15px;">注册</button>
      </form>
      <!-- <p class="login-link">已有账号？<a href="#" style="color: pink;" @click.prevent="navigateToLogin">立即登录</a></p> -->
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: '',
          email: '',
          realname: '',
          phone: '',
          gender: 'male',
          birthdate: '',
          captcha: ''
        },
        captchaSrc: './验证码1.jpg'
      };
    },
    methods: {
      handleSubmit() {
        // 处理表单提交逻辑
        console.log(this.form);
        // 可以在这里发送请求到后端
      },
      refreshCaptcha() {
        const captchas = [
          './验证码/验证码1.jpg',
          './验证码/验证码2.jpg',
          './验证码/验证码3.jpg',
          './验证码/验证码4.jpg'
        ];
        this.captchaSrc = captchas[Math.floor(Math.random() * captchas.length)] + '?' + new Date().getTime();
      },
    navigateToLogin() {
      // 跳转到登录页面的逻辑
      this.$router.push('/Login');
    }
    }
  };
  </script>
  
  <style scoped>
  /* 添加样式 */
  .container { padding: 20px; }
  .label { display: inline-block; width: 100px; }
  .input { flex: 1; }
.form-group { display: flex; align-items: center; margin-bottom: 15px; }
.label, .input, .submit-button, .login-link, .captcha-image, .form-container { color: black; }
.submit-button { width: 360px; height: 30px; background-color: yellow; }
  .login-link { margin-top: 10px; }
  .captcha-image { width: 150px; height: 40px; }
  .form-container {
  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 100%;
    }
  </style>